<template>
  <div class="mt-1 dark:text-zinc-100 text-zinc-800">
    <div
      class="ml-6 text-[15px] flex items-center justify-center w-[110px] h-3 bg-[#27272a] rounded-lg"
      v-if="bookItem && bookItem.purcharsenum === 0"
      @click="handleAddBookToShopCart(bookItem)"
    >
      加入购物车
    </div>
    <div class="flex ml-8 text-lg items-center gap-2" v-else-if="bookItem.purcharsenum > 0">
      <m-svg-icon
        @click="appOrSubtrBookFrmShopCart('-', bookItem)"
        data-type="jian"
        name="jianshaojianqujianhao"
        class="w-2.5 h-2.5"
        v-if="bookItem.purcharsenum >= 1"
      ></m-svg-icon>
      <span>{{ bookItem.purcharsenum }}</span>
      <m-svg-icon
        data-type="jia"
        @click="appOrSubtrBookFrmShopCart('+', bookItem)"
        name="zengjia"
        class="w-2.5 h-2.5"
      ></m-svg-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BookInfo } from '@/piniastore/book/state'
import ShopCart from '../service/shopCart'
defineProps<{
  bookItem: BookInfo
}>()

const { handleAddBookToShopCart, appOrSubtrBookFrmShopCart } = ShopCart
</script>

<style scoped></style>
